<?php
include("timer.php");

if(isset($_POST["record_count"])){
	for($i=0; $i<$_POST["record_count"]; $i++){
		//echo $_POST["record_".$i].": ";
		//echo $_POST[$_POST["record_".$i]]."<br>";	
	}
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>association</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
			/**
			 * Copyright (c) 2009 Mark S. Kolich
			 * http://mark.kolich.com
			 *
			 * Permission is hereby granted, free of charge, to any person
			 * obtaining a copy of this software and associated documentation
			 * files (the "Software"), to deal in the Software without
			 * restriction, including without limitation the rights to use,
			 * copy, modify, merge, publish, distribute, sublicense, and/or sell
			 * copies of the Software, and to permit persons to whom the
			 * Software is furnished to do so, subject to the following
			 * conditions:
			 *
			 * The above copyright notice and this permission notice shall be
			 * included in all copies or substantial portions of the Software.
			 *
			 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
			 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
			 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
			 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
			 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
			 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
			 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
			 * OTHER DEALINGS IN THE SOFTWARE.
			*/
			
			if(!window.Kolich){
				Kolich = {};
			}
			
			Kolich.Selector = {};
			// getSelected() was borrowed from CodeToad at
			// http://www.codetoad.com/javascript_get_selected_text.asp
			Kolich.Selector.getSelected = function(){
				var t = '';
				if(window.getSelection){
					t = window.getSelection();
				}else if(document.getSelection){
					t = document.getSelection();
				}else if(document.selection){
					t = document.selection.createRange().text;
				}
				return t;
			}
			
			Kolich.Selector.mouseup = function(e){
				var st = Kolich.Selector.getSelected();
				if(st!='' && st!=' '){
					//alert("You selected:\n"+st);
					//getting height and width of the message box
					//calculating offset for displaying popup message
					leftVal=e.pageX+"px";
					topVal=e.pageY-32+"px"; 
					//show the popup message and hide with fading effect
					$('#popup_div').css({left:leftVal,top:topVal}).show();
					$('#popup_text').val(st);
					//alert($('#popup_text').val());
					
				}
				else
					$('#popup_div').hide();
			}
			
			$(document).ready(function(){
				$(document).bind("mouseup", Kolich.Selector.mouseup);
			});
			
			function gotoDictionary()
			{
				
				window.open("http://www.google.com.tw/dictionary?langpair=en|zh-TW&q="+$('#popup_text').val(), "dict");
			}
</script>
<style type="text/css">
.popup_msg{
  position:absolute;
  z-index:10;   
  width:32px;
  height:32px;
  text-align:center;
  background:url(img/question.png) bottom right no-repeat;
 display:none;
}
</style>


</head>

<body onLoad="TimeCountDown()">
<input id="popup_text" type="hidden">
<div id="popup_div" class="popup_msg" onClick="gotoDictionary()">
	
</div>
<div id="wrapper">
	<div id="header">
		<div id="logo"></div>
		<div id="menu">
        <?php
			include("menu.php");
		?>
		</div>
	</div>
	<div class="clearer"></div>
	<div class="edge-top"></div>

	<div id="main">

		<div id="title">標題在這裡<font size=4><br>說明文字說明文字說明文字說明文字</font></div>
<hr/><br><br>

<!-- 內文開始 !-->

<?php
$article="'Reading' is a complex cognitive process of decoding symbols for the intention of constructing or deriving meaning (reading comprehension). It is the mastery of basic cognitive processes to the point where they are automatic so that attention is freed for the analysis of meaning.Reading is a means of language acquisition, of communication, and of sharing information and ideas. Like all language, it is a complex interaction between the text and the reader which is shaped by the reader's prior knowledge, experiences, attitude, and language community which is culturally and socially situated. The reading process requires continuous practices, development, and refinement.Readers use a variety of reading strategies to assist with decoding (to translate symbols into sounds or visual representations of speech) and comprehension. Readers may use morpheme, semantics, syntax and context clues to identify the meaning of unknown words. Readers integrate the words they have read into their existing framework of knowledge or schema (schemata theory). Other types of reading are not speech based writing systems, such as music notation or pictograms. The common link is the interpretation of symbols to extract the meaning from the visual notations.";

?>
<script>

var record=new Array();
var count=0;
var z_idx=1;
var Browser=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown';

function split_paragraph(num){
	var obj = "#para"+num;
	var obj2 = "#ifsplit"+num;
	if($(obj2).val()==0){
		$(obj).html("<br><img src='./img/goback.gif' width=12 height=12>");
		$(obj2).val(1);
	}
	else{
		$(obj).html("<img src='./img/marker.png' >");
		$(obj2).val(0);
	}
	
}



function delete_voc(str){
	if(Browser=="IE")
		var replace_str=str+" <SPAN onclick="+'"'+"delete_voc('"+str+"')"+'"'+">x</SPAN><BR>";
	else
		var replace_str=str+" <span onclick="+'"'+"delete_voc('"+str+"')"+'"'+">x</span><br>";
	document.getElementById("cart").innerHTML=document.getElementById("cart").innerHTML.replace(replace_str,"");	
}
function getElementsByName_iefix(tag, name) { 
	var elem = document.getElementsByTagName(tag); 
	var arr = new Array(); 
	var iarr=0;
	var i;
	var att;
	for (i = 0 ; i < elem.length; i++ ) {
		att = elem[i].name; 
		if (att == name) { 
			arr[iarr] = elem[i]; 
			iarr++ ; 
			break;
		} 
	} 
	return arr; 
}  
function assoc(str){
		document.getElementById("association_title").innerHTML="&nbsp;"+str;
		var elem;
		if(Browser=="IE")
				elem=getElementsByName_iefix("textarea", str)[0];
		else
			elem=document.getElementsByName(str)[0];
		if(elem!=null){
			//vocabulary cart
			if(document.getElementById("cart").innerHTML.search(str)==-1)
				document.getElementById("cart").innerHTML+=str+" <span onclick=\"delete_voc('"+str+"')\">x</span><br>";
			//association
			elem.style.zIndex=z_idx;
			z_idx++;
		}
		else{
			//vocabulary cart
			document.getElementById("cart").innerHTML+=str+" <span onclick=\"delete_voc('"+str+"')\">x</span><br>";
			//association		
			document.getElementById("record_arry").innerHTML+="<input type='hidden' name='record_"+count+"' value='"+str+"'>";
			count++;
			document.getElementsByName("record_count")[0].value=count;
			var newtxt=document.createElement('textarea');
			
			if(Browser=='IE'){
				newtxt.className="assoc_textarea";
				newtxt.name=str;
				newtxt.style.zIndex=z_idx;
			}
			else{
				newtxt.setAttribute("CLASS","assoc_textarea");
				newtxt.setAttribute("NAME",str);
				newtxt.setAttribute("STYLE","z-index:"+z_idx);
			}
			newtxt.innerHTML="在這裡寫下你對單字的聯想!";
			
			document.getElementById("association").appendChild(newtxt);
			z_idx++;
		}
}
</script>
<div id="test"></div>
<?php
function is_alpha($someString){
        return (preg_match("/[A-Z\s_]/i", $someString) > 0) ? true : false;
}
$pun=array("!","?",".");
$tok = strtok($article, " ");
$paragraph_num=0;
while ($tok !== false) {
	$flag=0;
	for($i=0; $i<sizeof($pun); $i++){
		$tail="";
		$pre="";
		$suf="";
		if(gettype(strpos($tok,$pun[$i]))=="integer"){
			$voc=substr($tok, 0, strpos($tok,$pun[$i]));	
			$tmp=substr($tok, strpos($tok,$pun[$i]));
			if($tmp!=$pun[$i])
				$tail=substr($tmp, strpos($tmp,$pun[$i])+1, strlen($tmp));
			if(is_alpha($voc[0])==false){
				$pre=$voc[0];
				$voc=substr($voc, 1);	
			}
			if(is_alpha($voc[strlen($voc)-1])==false){
				$suf=$voc[strlen($voc)-1];
				$voc=substr($voc, 0, -1);
			}
			echo $pre."<span ondblclick='assoc(\"$voc\")'>$voc</span>".$suf.$pun[$i]."<span id = 'para".$paragraph_num."' ondblclick='split_paragraph(".$paragraph_num.")'><img src='./img/marker.png'></span><input id='ifsplit".$paragraph_num."' type='hidden' value='0'> <span ondblclick='assoc(\"$tail\")'>$tail</span> \n";
			//ondblclick='' 按下圖片會發生甚麼事 
			$paragraph_num++;
			$flag=1;
		}   
	}
	if($flag==0){
		$pre="";
		$suf="";
		$voc=$tok;
		if(is_alpha($voc[0])==false){
			$pre=$voc[0];
			$voc=substr($voc, 1);	
		}
		if(is_alpha($voc[strlen($voc)-1])==false){
			$suf=$voc[strlen($voc)-1];
			$voc=substr($voc, 0, -1);
		}
		echo "$pre<span ondblclick='assoc(\"$voc\")'>$voc</span>$suf ";
	}
    $tok = strtok(" ");
}

?>

<form action="association.php" method="POST">
<br><br>
<div class="btn"><input type="submit" value="next"></div>
<input type="hidden" name="record_count" value=0>
<span id="record_arry"></span>
<div id="txt">18:27</div>

<div id="association"><span id="association_title">&nbsp;association</span></div>
<div id="voc_cart">&nbsp;vocabulary cart
<div id="cart"></div>
</div> 

</form>
<!-- 內文結束 !-->

	</div>
    <div class="edge-bottom"></div>
    <div id="footer"><?php  include("footer.php"); ?></div>
</div>

</body>
</html>